<template>
  <div id="app">
    <div class="tabs">
      <ul>
        <li>
          <router-link to="/">
            <div><img src="./assets/1.png"></div>
            <div>首页</div>
          </router-link>
        </li>
       <!-- <li>
          <router-link to="/explorer">
            <div><img src="./assets/2.png"></div>
            <div>KFC</div>
          </router-link>
        </li>
        <li>
          <router-link to="/cart">
            <div><img src="./assets/3.png"></div>
            <div>AAA</div>
          </router-link>
        </li>-->
        <li>
          <router-link to="/me">
            <div><img src="./assets/4.png"></div>
            <div>111</div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
  *{
    padding: 0;
    margin: 0;
  }
  #app{
    position: relative;
    width: 320px;
    height: 400px;
    border: 1px solid red;
    margin: 0 auto;
  }
  .tabs{
    width: 320px;
    height: 50px;
    position: absolute;
    bottom: 10px;
    ul{
      width: 320px;
      height: 50px;
      display: flex;
      padding-left: 0;
      justify-content: space-around;
      position:absolute ;
      li{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 40px;
        height: 40px;
        border: 1px solid #666;
        div{
          img{
            display: block;
            width: 20px;
            height: 20px;
            margin: 0 auto;
          }
          text-align: center;
        }
      }
    }
  }
</style>
